<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组件的嵌套</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
  <!--第三步：编写组件标签-->
  <app></app>

</div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = false
  //  创建student组件
  const student = Vue.extend({
    template: `
      <div>
      <h2>学生姓名：{{ studentName }}</h2>
      <h2>学生年龄：{{ age }}</h2>

      </div>
    `,
    // el: '#root', 组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器
    data() {
      return {
        studentName: '金串串',
        age: 18
      }
    },
  })
  //  第一步：创建school组件
  const school = Vue.extend({
    template: `
      <div>
      <h2>学校名称：{{ schoolName }}</h2>
      <h2>学校地址：{{ address }}</h2>
      <button @click="showSchoolName">点我提示学校名</button>
      <student></student>
      </div>
    `,
    // el: '#root', 组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器
    data() {
      return {
        schoolName: '尚硅谷',
        address: '北京',
      }
    },
    components: {
      student
    },
    methods: {
      showSchoolName() {
        alert(this.schoolName)
      }
    }
  })

  const hello = Vue.extend({
    template: `
      <div>
      <h2>你好啊！</h2>
      </div>
    `,
  })

  const app = Vue.extend({
    template: `
      <duv>
      <school></school>
      <hello></hello>
      </duv>`,
    components: {
      school,
      hello
    }
  })


  //  创建vm
  new Vue({
    el: '#root',
    // 第二步：注册组件（局部注册）
    components: {
      app,
    }
  })
</script>
</html>